
let vm = new Vue({
	el: '#app',
	// 修改Vue读取变量的语法
    delimiters: ['[[', ']]'],
	data: {
		username: '',		// 用户名
		password: '', 		// 密码
		password2: '',		// 确认密码
		mobile: '',			// 手机号
		allow: '',			// 同意协议

		error_name: false,
		error_password: false,
		error_password2: false,
		error_mobile: false,
		error_allow: false,

		error_name_message: '用户名由数字、字母或下画线组成的5-20个字符',		// 用户名错误提示
		error_mobile_message: '请输入正确的手机号码',	// 手机号码错误提示
		error_password_message:'密码由数字、字母组成,长度为8-20个字符',  // 密码错误
		error_password2_message:'两次密码输入要一致', // 确认密码错误提示
		url_checkuname : '',
		url_checkphone:  ''
	},
	// vue框架的钩子函数，当所有标签都被渲染后自动执行
	mounted(){
        this.url_checkuname = this.$refs.usenameSpan.dataset.apiUrl,
		this.url_checkphone=   this.$refs.mobileSpan.dataset.apiUrl
		console.log(this.url_checkuname )
		console.log(this.url_checkphone)
	},
	methods: {
		// 校验用户名
		check_username:function (){
			// 准备正则表达式
			let re = /^[a-zA-Z0-9_-]{5,20}$/;
			// 正则表达式匹配用户名
			if (re.test(this.username)) {
				// this.error_name = false;
				url = this.url_checkuname  //.url_username
				console.log(url)
				url = url.replace("@username",this.username)
				console.log(url)
				// 把vue实例赋值给_this
				var _this = this;
				//  向服务器发起验证请求
				axios.get(url)
					.then(function(result){
						console.log("成功",result)
						if(result.data.code==100){
							console.log(result.data.msg)
							_this.error_name_message = '';
							_this.error_name = false;
						} else {
							console.log(result.data.msg)
							// error_name_message
							_this.error_name_message = '用户名重复';
							_this.error_name = true;
						}
					})
					.catch(function(error){
						console.log(error)
					});
			} else {
				this.error_name_message = '用户名由数字、字母或下画线组成的5-20个字符';
				this.error_name = true;

			}
		},
		// 校验密码
		check_password(){
			// console.log(this)
			console.log("check_password")
			let re = /^[0-9A-Za-z]{8,20}$/;
			if (re.test(this.password)) {
				console.log(9999)
				this.error_password = false;
				this.error_password_message = ''
			} else {
				console.log(88888)
				this.error_password = true;
				this.error_password_message = "密码由数字、字母组成,长度为8-20个字符。"
			}
		},
		// 校验确认密码
		check_password2(){
			// 判断两次密码是否一致
			if(this.password != this.password2) {
				this.error_password2_message = "两次输入的密码不一致"
				this.error_password2 = true;
			} else {
				this.error_password2 = false;
				this.error_password2_message = ""
			}
		},
		// 校验手机号
		check_mobile(){
			// console.log(1111111111)
			let re = /^1[3-9]\d{9}$/;
			if(re.test(this.mobile)) {
				this.error_mobile = false;
				this.error_mobile_message = '';
				url = this.url_checkphone

				url = url.replace("@phone",this.mobile)
				console.log(url)
				var _this = this;
				// 验证手机号码是否唯一
				axios.get(url)
					.then(function(result){
						console.log("成功",result)
						if(result.data.code==-100) {
							console.log(result.data.msg)
							// error_name_message
							_this.error_mobile_message = '手机号重复';
							_this.error_mobile = true;
						}
					})
					.catch(function(error){
						console.log(error)
					});
			} else {
				this.error_mobile_message = '您输入的手机号格式不正确';
				this.error_mobile = true;
			}
		},
		// 校验是否勾选协议
		check_allow(){
			if(!this.allow) {
				this.error_allow = true;
			} else {
				this.error_allow = false;
			}
		},
		// 监听表单提交事件
		on_submit(){
			this.check_username();
			this.check_password();
			this.check_password2();
			this.check_mobile();
			this.check_allow();
			console.log(this.error_name)
			console.log(this.error_name,this.error_password,this.error_password2)
			console.log(this.error_mobile,this.error_allow)

			if(this.error_name == true || this.error_password == true || this.error_password2 == true
				|| this.error_mobile == true || this.error_allow == true) {
                // 禁用表单的提交
				window.event.returnValue = false;
				return false
            }
		},
	}
});